<template>
  <div class="register-container">
    <el-form :model="registerForm" @submit.native.prevent="onRegister" class="register-form">
      <h2>用户注册</h2>
      <el-form-item>
        <el-input v-model="registerForm.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="registerForm.password" type="password" placeholder="密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onRegister" :loading="loading">注册</el-button>
        <el-button type="text" @click="$router.push('/login')">返回登录</el-button>
      </el-form-item>
      <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
    </el-form>
  </div>
</template>

<script>
import api from '@/api';
export default {
  data() {
    return {
      registerForm: { username: '', password: '' },
      loading: false,
      error: ''
    };
  },
  methods: {
    async onRegister() {
      this.loading = true;
      this.error = '';
      try {
        await api.post('/auth/register', this.registerForm);
        this.$message.success('注册成功，请登录');
        this.$router.push('/login');
      } catch (e) {
        this.error = '注册失败，用户名可能已存在';
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.register-container { max-width: 400px; margin: 100px auto; }
.register-form { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px #eee; }
</style>
